import React from 'react'
import PropTypes from 'prop-types'
import { Button, Table, Row, Col, Form, Input, message, Modal } from 'antd'
import classnames from 'classnames'
import styles from './List.less'
import ModalOfEditBlackList from './Modal'

const FormItem = Form.Item
const confirm = Modal.confirm

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10
  }
}

const ButtonList = ({
  location,
  handleClick,
  addBlackList,
  onOk,
  modalProps,
  handleEdit,
  selectedRowOfBlackList,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
  ...tableProps
}) => {


  const columns = [

    {
      title: '微信号',
      dataIndex: 'dwechatId',
      key: 'dwechatId',
      width: 200,
    },
    {
      title: '操作人',
      dataIndex: 'operatorName',
      key: 'operatorName',
      width: 200,
    },
    {
      title: '操作时间',
      dataIndex: 'operationTime',
      key: 'operationTime',
      width: 200,
    },
    {
      title: '说明',
      dataIndex: 'description',
      key: 'description',
      width: 200,
    },
  ]

  const handleAdd = () => {
    let fields = getFieldsValue()
    console.log('fields', fields)
    if (!fields.wechatId || !fields.description) {
      message.error("请先输入微信号和说明哦")
      return
    }
    addBlackList(fields)
  }

  const edit = () => {
    if (selectedRowOfBlackList.length === 0) {
      message.error("你还未选择要编辑的条目哦")
      return
    } else if (selectedRowOfBlackList.length > 1) {
      message.error("不可同时选中多条数据编辑哦")
      return
    }
    handleEdit()
  }

  const handleOnOk = () => {
    let ids = selectedRowOfBlackList.map(item => item.id)
    onOk(ids)
  }

  const showConfirm = () => {
    confirm({
      title: "你确定要删除以下黑名单吗?",
      onOk: handleOnOk,
      onCancel() {
        console.log('Cancel')
      }
    })
  }



  const handleDelete = () => {
    if (selectedRowOfBlackList.length === 0) {
      message.error("您还未选择要删除的条目哦!")
      return
    }
    showConfirm()
  }



  return (
    <div>
      <Row gutter={24}>
        <Col md={6}>
          <FormItem label="微信号" {...formItemLayout}>
            {getFieldDecorator('wechatId')(<Input style={{ width: "100%" }} placeholder="运营微信号" />)}
          </FormItem>
        </Col>
        <Col md={6}>
          <FormItem label="说明" {...formItemLayout}>
            {getFieldDecorator('description')(<Input style={{ width: "100%" }} placeholder="运营微信号" />)}
          </FormItem>
        </Col>
        <Col md={12}>
          <Button type="primary" style={{ marginRight: 10 }} onClick={handleAdd}>添加</Button>
          <Button type="primary" style={{ marginRight: 10 }} onClick={edit}>编辑</Button>
          <Button type="danger" onClick={handleDelete}>删除</Button>
        </Col>
      </Row>
      <Table
        {...tableProps}
        className={classnames(styles.table)}
        columns={columns}
        simple
      />
      <ModalOfEditBlackList {...modalProps} />
    </div>
  )
}

ButtonList.propTypes = {
  roles: PropTypes.array,
  handleRoleMenuClick: PropTypes.func,
}

export default Form.create()(ButtonList)
